<template>
  <div>

    <h2 v-if="firstView">请输入关键字进行搜索</h2>
    <h2 v-else-if="loading">正在搜索中...</h2>
    <h2 v-else-if="errorMsg">{{errorMsg}}</h2>
    <div v-else class="row">
      <div class="card" v-for="user in users" :key="user.id">
        <a :href="user.html_url" target="_blank" rel="noreferrer">
          <img :src="user.avatar_url" alt="" style='width: 100px' />
        </a>
        <p class="card-text">{{user.login}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'SearchMain',

  data () {
    return {
      firstView: true, // 是否显示第一个界面
      loading: false, // 是否正在请求搜索中
      errorMsg: '', // 请求的错误提示信息
      users: [], // 搜索得到的用户列表
    }
  },

  mounted () {
    // 给总线绑定search事件, 在回调中发请求获取用户列表显示
    this.$bus.$on('search', async (keyword) => {
      // 更新为请求中
      this.firstView = false
      this.loading = true
      try {
        // 发请求
        const response = await axios({
          // url: '/dev-api/search/users2',
          url: '/dev-api/search/users',
          params: {
            q: keyword
          }
        })
        // 请求成功, 取出users
        const users = response.data.items
        // 更新为成功
        this.loading = false
        this.users = users
      } catch (error) {
        // 更新为失败
        this.loading = false
        this.errorMsg = '请求失败: ' + error.message
      }
    })
  }
}
</script>

<style scoped>
.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: .75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>
